<template>
	<view>
		<view v-for="(item,index) in banksList" :key="index">
			<view v-if='item.sumAmount == "0.00"' class="Item"
				:style='"background: url(https://supply.zhongyimotor.com/upload/applet/bank_"+item.bankAbbreviation+"_bg.png) 0 center no-repeat;background-size: 100%;color:"+item.mainColor'>
				<view class="bankInfo">
					<view class="icon"><u-icon
							:name="`https://supply.zhongyimotor.com/upload/applet/bank_${item.bankAbbreviation}_icon.png`"
							size="48"></u-icon></view>
					<view class="title">{{item.name}}</view>
				</view>
				<view class="dataInfo">
					<view class="item">
						<view class="name">授信利率</view>
						<view class="data">{{item.creditRateMin}}~{{item.creditRateMax}}%</view>
					</view>
					<view class="item">
						<view class="name">服务费比例<u-icon
								name="https://supply.zhongyimotor.com/upload/applet/bank_info_icon.png" size="28"
								top="100"></u-icon></view>
						<view class="data">{{item.ratio}}%</view>
					</view>
					<view class="action">
						<u-button hover-class="none" shape="circle" :customStyle="item.customStyle" :disabled="true"
							v-if="item.status ==  1|| item.status == 2 || item.status == 3">授信审核中</u-button>
						<u-button hover-class="none" shape="circle" :customStyle="item.customStyle" :disabled="false"
							@click="toReCredit(item)" v-else-if="item.status == 0">补充资料</u-button>
						<u-button hover-class="none" shape="circle" :customStyle="item.customStyle" :disabled="false"
							@click="toCreditGrant(item)" v-else>申请授信</u-button>
						<!-- <u-button hover-class="none" shape="circle" :customStyle="item.customStyle" :disabled="false"
							@click="toReCredit(item)" v-else>补充资料</u-button> -->
					</view>
				</view>
				<view class="bottomInfo">
					<view class="icon">
						<u-icon
							:name="`https://supply.zhongyimotor.com/upload/applet/bank_${item.bankAbbreviation}_time.png`"
							size="40"></u-icon>
					</view>
					<view class="validity">
						授信有效期：- -
					</view>
				</view>
			</view>
			<view v-else class="Item hasCredit"
				:style='"background: url(https://supply.zhongyimotor.com/upload/applet/bank_"+item.bankAbbreviation+"_credit_bg.png) 0 center no-repeat;background-size: 100%;color:"+item.mainColor'>
				<view class="bankInfo">
					<view class="icon"><u-icon
							:name="`https://supply.zhongyimotor.com/upload/applet/bank_${item.bankAbbreviation}_icon.png`"
							size="48"></u-icon></view>
					<view class="title">{{item.name}}</view>
				</view>
				<view class="cardMain">
					<view class="limitNum">
						<view class="title">可用额度(元) | 授信利率：{{item.rate}}% 服务费比例：{{item.ratio}}%</view>
						<view class="num">{{item.currentAmount}}</view>
					</view>
					<view class="limitTotal">
						<view class="title">授信总额度(元)</view>
						<view class="num">{{item.sumAmount}}</view>
					</view>
					<view class="limitUsed">
						<view class="title">已用额度(元)</view>
						<view class="num">{{item.useAmount}}</view>
					</view>
				</view>
				<view class="bottomInfo">
					<view class="icon">
						<u-icon
							:name="`https://supply.zhongyimotor.com/upload/applet/bank_${item.bankAbbreviation}_time.png`"
							size="40"></u-icon>
					</view>
					<view class="validity">
						授信有效期：{{item.timeExpiry}}
					</view>
					<!-- <view class="reCredit" @click="toReCredit(item)">补充资料<u-icon name="arrow-right" color="#FFF"
							size="24"></u-icon></view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from "moment"
	import banks from '@/static/bankData.js'
	export default {
		name: "bankList",
		props: {

		},
		watch: {},
		data() {
			return {
				banksList: []
			};
		},
		onReady() {},
		methods: {
			toReCredit(item) {
				uni.navigateTo({
					url: `/pages/creditGranting/index?mode=re&id=${item.creditId}&remarks=${item.remarks}`
				})
			},
			toCreditGrant(item) {
				uni.navigateTo({
					url: '/pages/creditGranting/index?mode=new&bankId=' + item.id
				})
			},
			getBankList() {
				let that = this

				that.$api.getBankList().then((res) => {
					that.banksList = []
					res.result.forEach((item) => {
						item.sumAmount = that.unitConverter(item.sumAmount)
						item.currentAmount = that.unitConverter(item.currentAmount)
						item.useAmount = that.unitConverter(item.useAmount)
						item.timeExpiry = moment(item.timeExpiry).format('YYYY-MM-DD')
						switch (item.sumAmount) {
							case "0.00":
								banks.unCredit.forEach((template) => {
									if (item.bankAbbreviation == template.bankAbbreviation) {
										let arr = Object.assign(item, template)
										that.banksList.push(arr)
									}
								})
								break;
							default:
								banks.hasCredit.forEach((template) => {
									if (item.bankAbbreviation == template.bankAbbreviation) {
										let arr = Object.assign(item, template)
										that.banksList.push(arr)
									}
								})
								break
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">

</style>